<template lang="pug">
	.login-wrap
		.login-input
			input-line(placeholder="请输入手机号" type="number" @getValue="getPhone" maxlength="11" ref="phoneInput")
			input-line(placeholder="请输入短信验证码" type="number" @getValue="getVerification" maxlength="6" mode="verification" codeType="7" time="120" :phone="phone")
			input-line(placeholder="请输入登录密码" type="text" @getValue="getPassword" maxlength="16" mode="showPassword" :password="true")
		.login-btn(@click="jumpToNext")
			main-button(text="登录" :isActive="nextStepPass")
		.login-footer 台州市卫生和计划生育委员会 监制
</template>

<script>
import inputLine from '@/components/input-line'
import mainButton from '@/components/main-button'
import sendCode from '@/components/send-code'
export default {
	data() {
		return {
			nextStepPassPhone: false,
			nextStepPassVerification: false,
			nextStepPassPassword: false,
			phone: ''
		}
	},
	computed: {
		nextStepPass() {
			return (
				this.nextStepPassPhone &&
				this.nextStepPassVerification &&
				this.nextStepPassPassword
			)
		}
	},
	mounted() {
		if (this.$route.query.phone) {
			this.$refs.phoneInput.inputtext = this.$route.query.phone
			this.phone = this.$route.query.phone.toString()
			if (this.phone.length === 11 && this.tools.isMobile(this.phone)) {
				this.nextStepPassPhone = true
			}
		}
	},
	onPullDownRefresh() {},
	onPageScroll(e) {},
	methods: {
		jumpToNext() {
			if (this.nextStepPass) {
				this.forget()
			}
		},
		getPhone(text) {
			text = text.toString()
			this.phone = text
			if (text.length === 11) {
				this.nextStepPassPhone = this.tools.isMobile(text)
			} else {
				this.nextStepPassPhone = false
			}
		},
		getVerification(text) {
			text = text.toString()
			this.code = text
			this.nextStepPassVerification = text.length > 0
		},
		getPassword(text) {
			text = text.toString()
			this.pasWd = text
			this.nextStepPassPassword = text.length > 0
		},
		forget() {
			this.wx.showLoading({
				title: '加载中'
			})
			this.api.tzApi
				.forget({
					phone: this.phone,
					password: this.pasWd,
					verCode: this.code
				})
				.then(data => {
					this.wx.hideLoading()
					if (data.responseFlag === '1') {
						this.$router.back()
					} else {
						this.wx.showToast({
							title: data.responseMessage,
							icon: 'none'
						})
					}
				})
				.catch(() => {
					this.wx.hideLoading()
				})
		}
	},
	components: {
		inputLine,
		mainButton,
		sendCode
	}
}
</script>

<style lang="stylus">
	page
		background-color white!important
	.login-wrap
		.login-input
			margin-top 200px
			.placeholderClass
				font-size 36px
				line-height 50px
			input
				font-size 36px!important
				line-height 50px!important
		.login-btn
			width 690px
			height 92px
			margin 60px auto 0
			border-radius 46px
			overflow hidden
	.login-footer
		position fixed
		bottom 38px
		width 100%
		text-align center
		color grayFontColor
		font-size 24px
		line-height 34px
</style>
